<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <canvas width="960" height="960"></canvas>
    <script src="d3.v4.min.js"></script>
    <script>
        const canvas = document.querySelector('canvas')
        context = canvas.getContext('2d')
        width = canvas.width
        height = canvas.height

        const simulation = d3.forceSimulation()
        .force('center',d3.forceCenter())
        .force('link',d3.forceLink().id(d=>{
            return d.id
        }))
        .force('charge',d3.forceManyBody())

        d3.json('./data/8311.json',(error,graph)=>{
            if(error) throw error;

            simulation.nodes(graph.nodes)
            .on('tick',ticked)

            simulation.force('link')
            .links(graph.links)

            function ticked(){
                context.clearRect(0,0,width,height)
                context.save()
                context.translate(width / 2, height / 2 + 40)

                context.beginPath()
                graph.links.forEach(drawLink)
                context.strokeStyle = "#aaa";
                context.stroke();

                context.beginPath()
                graph.nodes.forEach(drawNode)
                context.fill()
                context.strokeStyle = "#fff";
                context.stroke();

                context.restore()
            }
        })

        function drawLink(d) {
            context.moveTo(d.source.x, d.source.y);
            context.lineTo(d.target.x, d.target.y);
            }

        function drawNode(d) {
            context.moveTo(d.x + 3, d.y);//这一句不能够缺少
            context.arc(d.x, d.y, 3, 0, 2 * Math.PI);
}
    </script>
</body>
</html>